//行业分类
import React, { Component } from 'react';
import {
  View,
  Text,
  ListView,
  RefreshControl,                         //刷新小组件
  ActivityIndicator                       //底部刷新小组件
} from 'react-native';

import { SelpostionByFieldAcion } from '../../../actions/postionAction';      //加载action
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import Tradep_list from './tradep_list';
const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => { r1 !== r2 } });//listView 数据判断方式
class Tradep_body extends Component {
  // 初始化模拟数据
  constructor(props) {
    super(props);
    this.state = {
      uploading: true, //下拉刷新按钮状态 (初始化加载时处在loading状态)
      dwloading: false, //上拉刷新按钮状态
    }
    this.isFirst = true                         //页面第一次加载
  }

  //加载后渲染页面
  componentDidMount() {
    const { actions } = this.props;
    actions.SelpostionByFieldAcion({ page: 1, field: this.props.rowName }); //初始化查询
  }

  render() {
    //获取用户列表数据及是否等待状态
    const { postionList, isloading } = this.props.postion.data;
    //创建listView数据源
    const dataSource = ds.cloneWithRows(postionList)
    return (
      <View style={{ flex: 1 }}>
        <ListView
          refreshControl={                            //是否更新
            <RefreshControl                         //刷新控件
              refreshing={this.state.uploading && this.props.postion.isloading}                  //刷新时候的小控件
              onRefresh={this._onRefresh.bind(this)}
            />}
          enableEmptySections={true}
          dataSource={dataSource}         //数据源(数组)
          renderRow={this.renderRow.bind(this)}                 // 遍历数组的回调函数
          onEndReachedThreshold={1}                  //滚动临界值（到达后执行onEndReached）
          onEndReached={this.onEndReached.bind(this)}          //屏幕到底部的触发的事件
          renderFooter={this.renderFooter.bind(this)}           //底部刷新组件
        />
      </View>
    );
  }

  //刷新隐藏按钮
  componentDidUpdate() {
    if (this.state.uploading && !this.props.postion.isloading) {
      this.setState({
        uploading: false //下拉刷新按钮状态：隐藏
      })
    }
    if (this.state.dwloading && !this.props.postion.isloading) {
      this.setState({
        dwloading: false //上拉刷新按钮状态：隐藏
      })
    }
  }

  //下拉刷新开始
  _onRefresh() {
    this.props.postion.isloading = true //设置为加载状态
    const { actions } = this.props;
    actions.SelpostionByFieldAcion({ page: 1, field: this.props.rowName });
    this.setState({
      uploading: true //下拉刷新按钮状态：显示
    });
  }

  onEndReached() {
    if (!this.isFirst && !this.props.postion.isloading) {
      const { postionList, page, pages } = this.props.postion.data;
      if (page != pages) {//不等于最后一页加载
        const { actions } = this.props;
        actions.SelpostionByFieldAcion({ page: page + 1, field: this.props.rowName });
        this.props.postion.isloading = true;
        this.setState({
          dwloading: true //下拉刷新按钮状态 显示
        })
      }
    } else {
      this.isFirst = false;
    }
  }

  renderFooter() {
    if (!this.props.postion.ret) {
      //console.log("请求失败");
    }
    if (this.state.dwloading) {
      return (<View style={{ marginVertical: 10 }}>
        <ActivityIndicator
          animating={true}
          style={{ height: 10, alignItems: 'center', justifyContent: 'center', padding: 1, }}
          size="small" />
      </View>);
    }
    if (this.state.uploading) {
      return (<View style={{ marginVertical: 10, height: 100, alignItems: 'center', justifyContent: 'flex-end' }}>
        <Text>玩命加载ing</Text>
      </View>);
    }
    return (<View style={{ marginVertical: 10 }} />);
  }

  //list子项加载方法
  renderRow(rowData) {
    return (
      <View>
        <Tradep_list
          postion={rowData}
          company={rowData.company}
          fields={rowData.company.fields}
          navigation={this.props.navigation} />
      </View>
    )
  }
}

//组合action
var actions = {
  SelpostionByFieldAcion,
}

//连接state到props
const mapStateToProps = state => {
  return {
    postion: state.SelpostionByFieldReducer             //自己的reducers
  }
}

//连接action
const mapDispatchToProps = (dispatch) => {
  return {
    actions: bindActionCreators(actions, dispatch)
  }
}

//导出组合好的组件(组合后状态改变重新渲染组合组件的页面)
export default connect(
  mapStateToProps, mapDispatchToProps
)(Tradep_body);